<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">我的订单</block>
		</cu-custom>
		<view>
			<view v-if="orders.length == 0" class="flex flex-direction padding margin bg-white">
				<text class="text-center">暂无数据</text>
			</view>
			<view v-for="(order,index) in orders" :key="index" class="padding flex justify-between flex-direction bg-white margin">
				
				<view class="cu-timeline">
					<view class="flex align-center justify-between">
						<text class=" margin-tb-sm text-lg">
							<text>
								<text class="cuIcon-rechargefill"></text>
								<text>{{parseMoney(order.amount / 100)}}</text>
							</text>
						</text>
						<text class=" margin-tb-sm cu-tag bg-yellow round text-white" v-if="order.statu === 'ST'">已开始</text>
						<text class="cu-tag bg-blue round text-white" v-else-if="order.statu === 'FIN'">已结束</text>
						<view v-else-if="order.statu === 'UNPAY'">
							<text  class="cu-tag bg-red round text-white" >未支付</text>
							<button @tap="payOrder(order)" class="cu-btn pay-button bg-red animation-shake margin-left-sm">付款</button>
						</view>
						
						
					</view>
					<view class="cu-item cur text-yellow cuIcon-pullright">
						<view class="bg-yellow text-white padding-xs">
							<text class="margin-right">{{order.ct}}</text>进门
						</view>
					</view>
					<view v-if="order.statu !== 'ST'" class="cu-item cur text-red cuIcon-pullleft">
						<view class="bg-red text-white padding-xs">
							<text class="margin-right">{{order.et}}</text>出门
						</view>
					</view>
					
					<view v-if="order.statu === 'FIN'" class="cu-item cur text-blue cuIcon-sponsorfill">
						<view class=" content bg-blue text-white">
							<view>
								<text class="margin-right">完成支付</text>
							</view>
						</view>
					</view>
				</view>
				<view class="margin-top text-center" v-if="order.originalCode">
					<text>
						付款单号：
					</text>
					<text>
						{{order.originalCode}}
					</text>
				</view>
			</view>
			<view v-if="hasData" class="flex flex-direction padding margin bg-white">
				<text @tap="loadMore" class="text-center cuIcon-unfold">显示更多</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			hasData: function() {
				return this.current < this.pages;
			}
		},
		data: function() {

			return {
				current: 1,
				size: 10,
				pages: 0,
				state: {},
				orders: []
			};

		},
		onLoad:function(){
			this.state = this.common.getState();
			this.init();
		},
		onShow: function() {
			this.state = this.common.getState();
		},
		methods: {
			init: function() {
				this.current = 1;
				this.size = 10;
				this.search();
			},
			search: function() {
				let self = this;
				this.http.get({
					url: "/order/page",
					param: {
						current: this.current,
						size : this.size,
						storeId: this.state.autor.store.storeId,
						clientId: this.state.autor.client.clientId
					}
				}).then(function(res) {
					for (let index in res.records) {
						self.orders.push(res.records[index]);
					}
					self.current = res.current;
					self.pages = res.pages;
				});
			},
			loadMore: function() {
				this.current = this.current + 1;
				this.search();
			},
			parseMoney: function(money) {
				return this.common.parseMoney(money);
			},
			payOrder: function(order) {
				let self = this;
				uni.showModal({
				    title: '发起支付',
				    content: '支付订单人民币'+(this.parseMoney(order.amount / 100))+'元',
				    success: function (res) {
				        if (res.confirm) {
							self.http.post({
								url: "/order/info",
								param: {
									storeId: self.state.autor.store_client.storeId,
									clientId: self.state.autor.store_client.clientId,
									openId: self.state.autor.store_client.openId,
									orderId: order.orderId
								}
							}).then(function(data) {
								
								self.pay.exePay(data).then(resPay => {
									order.statu = "FIN";
								});
								// self.jweixin.config({
								//   debug: false,
								//   appId: data.appId,
								//   timestamp: data.timeStamp,
								//   nonceStr: data.nonceStr, 
								//   signature: data.paySign,
								//   jsApiList: ["chooseWXPay"]
								// });
								
								// self.jweixin.ready(function() {
								// 	self.jweixin.chooseWXPay({
								// 	  timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
								// 	  nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
								// 	  package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
								// 	  signType: data.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
								// 	  paySign: data.paySign, // 支付签名
								// 	  success: function (res) {
								// 	    // 支付成功后的回调函数
								// 		self.message.info("支付成功了");
								// 		order.statu = "FIN";
								// 	  }
								// 	});
								// });
							});
				        } else if (res.cancel) {
				        }
						
				    }
				});
			}
		}
	}
</script>

<style>
	.pay-button {
		animation-iteration-count: infinite;
		animation-delay: 0s;
		animation-duration: 1.5s;
	}
</style>
